Vue.component('v-chart', VueECharts)
new Vue({
    el: '#app',
    data: function () {
        return {
            isReady: true, //数据是否已经准备好,防止页面闪现大括号{{}}
            activeDialogIndex: '', //模态窗索引
            tab: 1,
            stat1: {
                chartOption: {},
                tipInfo: { //提示框
                    data: {
                        name: '',
                        value: '',
                        otherValue: {
                            xl: 0,
                            ytqysl: 0,
                            ltcpsl: 0
                        }
                    },
                    position: {
                        x: '-',
                        y: '-'
                    }
                }
            },
            stat2: {
                chartOption: {}
            },
            stat3: {
                yjList: [ //最新产品检测提醒
                    {
                        name: '人用狂犬病疫苗（宁波荣安）抽检不合格超过3次'
                    },
                    {
                        name: '冻干腮腺炎减毒活疫苗（浙江卫信）收到有效投诉举报…'
                    },
                    {
                        name: '冻干腮腺炎减毒活疫苗（浙江卫信）收到有效投诉举报…'
                    },
                    {
                        name: '冻干腮腺炎减毒活疫苗（浙江卫信）收到有效投诉举报…'
                    },
                    {
                        name: '冻干腮腺炎减毒活疫苗（浙江卫信）收到有效投诉举报…'
                    },
                    {
                        name: '冻干腮腺炎减毒活疫苗（浙江卫信）收到有效投诉举报…'
                    },
                    {
                        name: '冻干腮腺炎减毒活疫苗（浙江卫信）收到有效投诉举报…'
                    },
                    {
                        name: '冻干腮腺炎减毒活疫苗（浙江卫信）收到有效投诉举报…'
                    },
                    {
                        name: '冻干腮腺炎减毒活疫苗（浙江卫信）收到有效投诉举报…'
                    },
                    {
                        name: '冻干腮腺炎减毒活疫苗（浙江卫信）收到有效投诉举报…'
                    }
                ],
                yjczfx: { //预警处置风险
                    name: '201907310批次人用狂犬疫苗温度超限…'
                },
                form: {
                    hsqdlx: 1, //会商确定类型
                    hsyj: '' //会商意见
                }
            },

        }
    },
    created: function () {
        this.createStat1()

        this.createStat2()
    },
    mounted() {
        this.drawBar()
    },
    methods: {
        handleClickQY() {
            this.$nextTick(() => {
                var that = this;
                $('#myModal-1').modal()
                that.drawLine()

            })

        },
        handleClickLB() {
            this.$nextTick(() => {
                var that = this;
                $('#myModal-2').modal()
                that.drawLine2()

            })
        },
        drawLine() { //源头企业历年供货量变化情况
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('line'));
            // 指定图表的配置项和数据
            var lableList = ['2017年', '2018年', '2019年', '2019年', '2019年', '甲肝疫苗', '2019年', '2019年', '2019年', '2019年']
            var dataList = [
                0.05, 0.045, 0.042, 0.04, 0.038, 0.035, 0.032, 0.03, 0.026, 0.022
            ]
            var option = {
                color: ['rgba(234, 18, 112, 1)'],
                grid: {
                    left: 80,
                    top: 50,
                    bottom: 40,
                    right: 40
                },
                title: {
                    text: '出库数量 单位：瓶',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    left: 10
                },

                xAxis: {
                    type: 'category',
                    data: lableList,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        interval: 0, //保证所有横向坐标数据全展示不隐藏
                        margin: 10 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true, //不显示y轴
                        symbol: ['none'],
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: 'rgba(1, 60, 217, 1)'
                        }
                    },
                    splitLine: {
                        show: false, //纵向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        // interval: 0,
                        margin: 20 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    axisLine: {
                        show: true, //不显示y轴
                        symbol: ['none'],
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: 'rgba(1, 60, 217, 1)'
                        }
                    },
                    splitLine: {
                        show: false, //横向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    },
                    splitArea: {
                        show: true, //横向网格区域
                        areaStyle: {
                            color: ['rgba(0, 70, 255, 0.1)', 'rgba(5,39,75,0)']
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 横坐标指示器
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    // alwaysShowContent: true, //悬浮后一直显示
                    // 自定义悬浮提示框内容（数据处理后加单位）
                    backgroundColor: 'rgba(0,0,0,0)',
                    formatter: function (params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                        var relVal = '<div class="bg_2_tip" style="text-align:left;padding:20px 30px;font-size:14px "><span style="color:#fff;font-size:20px;">' + params[0].name + '</span>' + (params[0] ? '<br><span class="color-blue-2">' + params[0].seriesName + '<span class="color-yellow-2 f20 pl10">' + params[0].value + '</span>瓶</span>' : '') + '</div>'
                        return relVal
                    }
                },
                series: [{
                    name: '源头企业历年供货量变化情况',
                    type: 'line',
                    data: dataList,
                    label: {
                        show: false,
                        position: 'bottom',
                        formatter: '{c}',
                        color: '#fff'
                    },
                    // symbol: 'circle', //
                    symbolSize: 12
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        drawLine2() { //疫苗品种流通量历年变化趋势
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('line2'));
            // 指定图表的配置项和数据
            var lableList = ['2017年', '2018年', '2019年', '2019年', '2019年', '甲肝疫苗', '2019年', '2019年', '2019年', '2019年']
            var dataList = [
                0.05, 0.045, 0.042, 0.04, 0.038, 0.035, 0.032, 0.03, 0.026, 0.022
            ]
            var option = {
                color: ['rgba(0, 198, 1, 1)'],
                grid: {
                    left: 80,
                    top: 50,
                    bottom: 40,
                    right: 40
                },
                title: {
                    text: '出库数量 单位：瓶',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    left: 10
                },

                xAxis: {
                    type: 'category',
                    data: lableList,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        interval: 0, //保证所有横向坐标数据全展示不隐藏
                        margin: 10 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true, //不显示y轴
                        symbol: ['none'],
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: 'rgba(1, 60, 217, 1)'
                        }
                    },
                    splitLine: {
                        show: false, //纵向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        // interval: 0,
                        margin: 20 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    axisLine: {
                        show: true, //不显示y轴
                        symbol: ['none'],
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: 'rgba(1, 60, 217, 1)'
                        }
                    },
                    splitLine: {
                        show: false, //横向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    },
                    splitArea: {
                        show: true, //横向网格区域
                        areaStyle: {
                            color: ['rgba(0, 70, 255, 0.1)', 'rgba(5,39,75,0)']
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 横坐标指示器
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    // alwaysShowContent: true, //悬浮后一直显示
                    // 自定义悬浮提示框内容（数据处理后加单位）
                    backgroundColor: 'rgba(0,0,0,0)',
                    formatter: function (params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                        var relVal = '<div class="bg_2_tip" style="text-align:left;padding:20px 30px;font-size:14px "><span style="color:#fff;font-size:20px;">' + params[0].name + '</span>' + (params[0] ? '<br><span class="color-blue-2">' + params[0].seriesName + '<span class="color-yellow-2 f20 pl10">' + params[0].value + '</span>瓶</span>' : '') + '</div>'
                        return relVal
                    }
                },
                series: [{
                    name: '源头企业历年供货量变化情况',
                    type: 'line',
                    data: dataList,
                    label: {
                        show: false,
                        position: 'bottom',
                        formatter: '{c}',
                        color: '#fff'
                    },
                    // symbol: 'circle', //
                    symbolSize: 12
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        drawBar() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('bar-mian'));
            // 指定图表的配置项和数据
            var lableList = ['2017年', '2018年', '2019年']
            var dataList = [
                23, 32, 42
            ]
            var option = {
                color: ['rgba(0, 198, 1, 1)'],
                grid: {
                    left: 80,
                    top: 50,
                    bottom: 40,
                    right: 40
                },
                title: {
                    text: '单位：个',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    left: 10
                },

                xAxis: {
                    type: 'category',
                    data: lableList,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        interval: 0, //保证所有横向坐标数据全展示不隐藏
                        margin: 10 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true, //不显示y轴
                        symbol: ['none'],
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: 'rgba(1, 60, 217, 1)'
                        }
                    },
                    splitLine: {
                        show: false, //纵向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        // interval: 0,
                        margin: 20 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    axisLine: {
                        show: true, //不显示y轴
                        symbol: ['none'],
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: 'rgba(1, 60, 217, 1)'
                        }
                    },
                    splitLine: {
                        show: false, //横向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    },
                    splitArea: {
                        show: true, //横向网格区域
                        areaStyle: {
                            color: ['rgba(0, 70, 255, 0.1)', 'rgba(5,39,75,0)']
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    // axisPointer: { // 横坐标指示器
                    //     type: 'bar',
                    //     lineStyle: {
                    //         color: 'rgba(0,0,0,0)'
                    //     }
                    // },
                    // alwaysShowContent: true, //悬浮后一直显示
                    // 自定义悬浮提示框内容（数据处理后加单位）
                    backgroundColor: 'rgba(0,0,0,0)',
                    formatter: function (params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                        var relVal = '<div class="bg_2_tip" style="text-align:left;padding:20px 30px;font-size:14px "><span style="color:#fff;font-size:20px;">' + params[0].name + '</span>' + (params[0] ? '<br><span class="color-blue-2">' + params[0].seriesName + '<span class="color-yellow-2 f20 pl10">' + params[0].value + '</span>瓶</span>' : '') + '</div>'
                        return relVal
                    }
                },
                series: [{
                    name: '历年疫苗流通品种数统计',
                    type: 'bar',
                    barWidth: 30,
                    data: dataList,
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}',
                        color: '#fff'
                    },
                    // symbol: 'circle', //
                    symbolSize: 12
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        hoverMap: function (item) {
            this.stat1.tipInfo = {
                data: item.data,
                position: {
                    x: item.event.offsetX,
                    y: item.event.offsetY
                }
            }
        },

        submitForm: function () {
            alert('提交表单')
        },
        createStat1: function () {
            var that = this;
            var dataList = [
                [{
                    name: '内蒙古自治区',
                    value: {
                        xl: 65231,
                        ltcpsl: 800,
                        ytqysl: 200
                    }
                }, {
                    name: '浙江省'
                }],
                [{
                    name: '北京市',
                    value: {
                        xl: 65330,
                        ltcpsl: 110,
                        ytqysl: 200
                    }
                }, {
                    name: '浙江省'
                }],
                [{
                    name: '四川省',
                    value: {
                        xl: 65235,
                        ltcpsl: 140,
                        ytqysl: 200
                    }
                }, {
                    name: '浙江省'
                }],
                [{
                    name: '天津市',
                    value: {
                        xl: 65236,
                        ltcpsl: 130,
                        ytqysl: 200
                    }
                }, {
                    name: '浙江省'
                }],
                [{
                    name: '安徽省',
                    value: {
                        xl: 87992,
                        ltcpsl: 130,
                        ytqysl: 200
                    }
                }, {
                    name: '浙江省'
                }],
                [{
                    name: '山东省',
                    value: {
                        xl: 62642,
                        ltcpsl: 10,
                        ytqysl: 200
                    }
                }, {
                    name: '浙江省'
                }],
                [{
                    name: '黑龙江省',
                    value: {
                        xl: 88983,
                        ltcpsl: 10,
                        ytqysl: 200
                    }
                }, {
                    name: '浙江省'
                }],
                [{
                    name: '广东省',
                    value: {
                        xl: 3234,
                        ltcpsl: 10,
                        ytqysl: 200
                    }
                }, {
                    name: '浙江省'
                }],
                [{
                    name: '青海省',
                    value: {
                        xl: 4355,
                        ltcpsl: 10,
                        ytqysl: 200
                    }
                }, {
                    name: '浙江省'
                }],
                [{
                    name: '湖北省',
                    value: {
                        xl: 5566,
                        ltcpsl: 10,
                        ytqysl: 200
                    }
                }, {
                    name: '浙江省'
                }]
            ];
            var that = this;
            $.get('/src/js/china.json', function (mapJson) {
                that.stat1.chartOption = AllOptions.createOption1(mapJson, dataList)
            })

        },
        createStat2: function () { //疫苗不良反应发生率前十产品
            var lableList = ['甲肝疫苗', '流感疫苗', '狂犬疫苗', '水痘疫苗', '麻腮风三联疫苗', '甲肝疫苗', '狂犬疫苗', '甲肝疫苗', '狂犬疫苗', '甲肝疫苗']
            var dataList = [
                0.05, 0.045, 0.042, 0.04, 0.038, 0.035, 0.032, 0.03, 0.026, 0.022
            ]
            this.stat2.chartOption = AllOptions.createOption2(lableList, dataList)
        },

        turnToZsfx() { //追溯分析
            location.href = "./ptypzsfx.html"
        },
        turnToYmzxfx() { //疫苗专项分析
            location.href = "./ymzxfx.html"
        }
    }
})